<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="heroList"></ul>

    <script>
      async function getHeros() {
        return fetch("https://study.duyiedu.com/api/herolist")
          .then((resp) => resp.json())
          .then((resp) => resp.data);
      }

      (async () => {
        const herosList = await getHeros();
        const heroListEl = document.querySelector("#heroList");
        /* herosList
          .map((o) => `<li>${o.cname}</li>`)
          .forEach((item) => {
            heroListEl.innerHTML += item;
          }); */

        heroListEl.innerHTML = herosList
          .map((o) => `<li>${o.cname}</li>`)
          .join("");
      })();
    </script>
  </body>
</html>
